<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公司名称：">
          <el-input
            v-model="formInline.merchantName"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺名称：">
          <el-input
            v-model="formInline.shopName"
            placeholder="请输入店铺名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="购卡人手机号：">
          <el-input
            v-model="formInline.phoneNumber"
            placeholder="请输入购卡人手机号"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:show="{ scope }">
          <el-switch 
          v-model="value1" 
          @change="handleSwitch(scope.row.id)"  
          active-value="1" 
          inactive-value="0"
          active-text="显示" 
          inactive-text="不显示"></el-switch>
        </template>      
        <template v-slot:operate="{ scope }">
          <el-button @click="handleDown(scope.row.contract)" type="primary" >下载协议</el-button>
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
// components
import { getblockchainlist } from "@/api/blockChain";
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  name: "warningList",
  components: {

  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      formInline: {
        merchantName: "", //订单号
        shopName: "", //关联流水号
        phoneNumber: "", //商家名称
      },
      date: [],
      tableData: [],
      tableColumn: [
        { prop: "merchantName", label: "公司名称" ,width:200},
        { prop: "shopName", label: "店铺名称" ,width:200},
        { prop: "contractName", label: "协议名称"},
        { prop: "phoneNumber", label: "购卡人手机号" ,width:200},
        { prop: "contractStatus", label: "合约状态",width:150},
        { prop: "voucher", label: "区块链地址",width:200 },
        { prop: "createTime", label: "合约签订时间" ,width:200},
        { label: "操作", slot: true, slotName: "operate",width:200 },
      ],
      value1: '',
    };
  },
  computed: {
    
  },
  mounted() {
    this.getList();
  },
  methods: {

    handleDown(url) {
      console.log('this.$IMG_URL',this.$IMG_URL)
      window.location.href = this.$IMG_URL+url
      // window.open(this.$IMG_URL+'/'+url,"_blank")
    },
    search() {
      //搜索
      console.log(this.formInline);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    reset() {
      this.date=[];
      this.formInline = {};
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    getList() {
      //联动信息
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      getblockchainlist(params)
        .then((res) => {
          const { total, records } = res.result;
          console.log('res',res)
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}



.listBox_head {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}
</style>